<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			.all{
				width:960px;
				margin:0 auto;
			}
			.top,.bot{
				height:100px;
				background:#ccc;
			}
			.cnt{
				margin-top:10px;
				background:darkred;

				margin-bottom:10px;
			}
			.cnt .box{

			}
			.box1{
				width:260px;
				background:red;
				float:left;
			}
			.cnt .box2{
				width:480px;
				margin:0px 10px;
				background:green;
				float:left;

			}
			.box3{
				width:200px;
				background:blue;
				float:left;
			}
			.box2 .sbox{
				float:left;
				width:25%;
				height:200px;
				margin-top:10px;
			}
			.sbox1{
				background:red;
			}
			.sbox2{
				background:pink;
			}
			.sbox3{
				background:blue;
			}
			.sbox4{
				background:yellow;
			}
		
			.clearfix:after{
				display:table;
				clear:both;
				content:"";
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			
			<div class="cnt clearfix">
				<div class="box box1">left</div>
				<div class="box box2">
					<div class="sbox sbox1">
						1
					</div>
					<div class="sbox sbox2">2</div>
					<div class="sbox sbox3">3</div>
					<div class="sbox sbox4">4</div>
					<div class="sbox sbox1">1</div>
					<div class="sbox sbox2">2</div>
					<div class="sbox sbox3">3</div>
					<div class="sbox sbox4">4</div>
					<div class="sbox sbox1">1</div>
					<div class="sbox sbox2">2</div>
					<div class="sbox sbox3">3</div>
					<div class="sbox sbox4">4</div>
				</div>
				<div class="box box3">right</div>
			</div>
			
			
			
			<div class="bot"></div>
		</div>
	</body>
</html>
